<template>
  <div>
    <el-dialog
      v-dialogDrag
      :title="dimenList"
      model
      :visible.sync="isclient"
      :close-on-click-modal="false"
      width="50%"
      top="30vh"
      append-to-body
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('shop.name1') }}</span>
        <el-input v-model.trim="client.fname" class="input-width" size="mini" placeholder="请输入科目名称" @keyup.enter.native="clientSearch" />
        <el-button class="butt" size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="clientlDialogData"
        :table-header="clientDialogHeader"
        table-height="53vh"
        serial
        @clickRow="clientlSelectRow"
      />
      <jc-pagination
        v-show="client.total > 0"
        :total="client.total"
        :page.sync="client.pageNum"
        :limit.sync="client.pageSize"
        @pagination="sujectOpen"
      />
    </el-dialog>
  </div>
</template>

<script>
import { queryDimensionSearch } from '@/api/financial/voucher'

export default {
  props: {
    dimenList: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isclient: false,
      client: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      clientlDialogData: [],
      clientDialogHeader: [
        { label: this.$t('shop.fnumber'), prop: 'frealNumber' },
        { label: this.$t('shop.name1'), prop: 'frealName' },
        { label: 'ID', prop: 'frealId' }
      ]
    }
  },
  created() {
    this.sujectOpen()
  },
  methods: {
    sujectOpen() {
      this.isclient = true
      const DATA = {
        ...this.client,
        searchName: this.dimenList + ''
      }
      queryDimensionSearch(DATA).then(res => {
        this.clientlDialogData = res.data.list
        this.client.total = res.data.total
      })
    },
    // 双击选中
    clientlSelectRow(item) {
      this.$emit('dimen', item)
    },
    clientSearch() {
      this.client.pageNum = 1
      this.sujectOpen()
    },
    handleClose() {
      const DATA = {
        ftypename: '',
        ftypenumber: ''
      }
      this.$emit('dimen', DATA)
    }
  }
}
</script>

<style scoped lang="scss">
.materiel-form {
  margin-bottom: 5px;
  .materiel-code {
    width: 80px;
    margin-right: 10px;
  }
  .butt {
    margin-left: 10px;
  }
}
</style>

